<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			*{
				padding:0px;
				margin:0px;
				}
				.list{
					width:200px;
					border:1px solid red;
					padding:10px;
					box-sizing: border-box;
				}
				a{
					text-decoration: none;
					display: block;
					height: 30px;
					width:100%;
					position: relative;
					color:#fff;
					font-size: 16px;
					background: #ccc;
					line-height: 30px;
					border-bottom: 1px solid #dedede;
					/* text-align: center; */
					 padding-left:50px; 
					 box-sizing: border-box;
					
				}
				li{
					list-style: none;
				}
				ul>li{
					/* height: 20px;
					line-height: 20px; */
				}
				.t2,.t3,.t4{
					display: none;
				}
				i{
					width:16px;
					height: 16px;
					position: absolute;
					top:8px;
					left:15px;
					/* padding:7px 0px; */
					display: inline-block;
					background:url(img/leftJia.png) no-repeat;
				}
				.current{
					background: red;
				}
		</style>
	</head>
	<body>
		<div class="list">
			<ul class="t1">
				<li><a href="javascript:;">一级菜单</a></li>
				<li><a href="javascript:;">一级菜单</a></li>
				<li class='s1'>
					 <a href="javascript:;"><i></i>一级菜单</a>
				    <ul class="t2">
					<li><a href="javascript:;">二级菜单</a></li>
					<li><a href="javascript:;">二级菜单</a></li>
					<li class='s2'>
						<a href="javascript:;"><i></i>二级菜单</a>
						<ul class="t3">
							<li><a href="javascript:;">三级菜单</a></li>
							<li><a href="javascript:;">三级菜单</a></li>
							<li><a href="javascript:;">三级菜单</a></li>
							<li class='s3'>
								<a href="javascript:;"><i></i>三级菜单</a>
								<ul class="t4">
									<li><a href="javascript:;">四级菜单</a></li>
									<li><a href="javascript:;">四级菜单</a></li>
									<li><a href="javascript:;">四级菜单</a></li>
								</ul>
								</li>
						</ul>
						</li>
					<li><a href="javascript:;">二级菜单</a></li>
				</ul>
				<li><a href="javascript:;">一级菜单</a></li>
				</li>
			</ul>

		</div>
	</body>
	<script src="./js/jquery.min.js"></script>
	<script>
		$(function() {
			var s=t=h=1;
        $(".t1>li>a").click(function(){
			// var h=1;
			$(this).parent().siblings().children('a').removeClass("current");
			$(this).addClass("current");
			$(this).parent().children("ul").toggle();
			// console.log($(this).children('i'));
			if(h%2==1){
				$(this).children('i').css({'background-image':"url(img/leftJian.png)"});
	              h=h+1;
			}else if(h%2==0){
				$(this).children('i').css({'background-image':"url(img/leftJia.png)"});
				h=h+1;
			}
		})
        $(".t2>li>a").click(function(){
			$(this).parent().siblings().children('a').removeClass("current");
			$(this).addClass("current");
			$(this).parent().children("ul").toggle();
			// console.log($(this).children('i'));
			if(s%2==1){
				$(this).children('i').css({'background-image':"url(img/leftJian.png)"});
			     s++;
			}else if(s%2==0){
				$(this).children('i').css({'background-image':"url(img/leftJia.png)"});
				s++;
			}
		})
		  $(".t3>li>a").click(function(){
			$(this).parent().siblings().children('a').removeClass("current");
			$(this).addClass("current");
			$(this).parent().children("ul").toggle();
			// console.log($(this).children('i'));
			if(t%2==1){
				$(this).children('i').css({'background-image':"url(img/leftJian.png)"});
			     t++;
			}else if(t%2==0){
				$(this).children('i').css({'background-image':"url(img/leftJia.png)"});
				t++;
				// $(this).removeClass('current');

			}
		})
		})
	</script>
</html>
